<template>
  <view v-if="tempVideoUrl" class="mask" @tap="close">
    <view class="close-btn" @tap="close">
      <image class="close-icon" :src="closeImg" mode="aspectFit"></image>
    </view>

    <view class="block" @tap.stop="toggleControls">
      <video 
        id="myVideo"
        class="block_video" 
        :class="{'is-fullscreen': isFullscreen}"
        :src="tempVideoUrl"
        :autoplay="true"
        :show-fullscreen-btn="true"
        :show-play-btn="true"
        :show-center-play-btn="true"
        :enable-progress-gesture="true"
        :show-progress="true"
        :direction="direction"
        :playback-rate="playbackRate"
        :object-fit="objectFit"
        @error="handleError"
        @fullscreenchange="handleFullscreenChange"
      />
      
      <!-- 控制面板 -->
      <view class="controls" :class="{active: showControls}" @tap.stop>
        <!-- 旋转控制 -->
        <view class="control-item" @tap="toggleDirection">
          <text class="control-text">{{ direction === 0 ? '横屏' : '竖屏' }}</text>
        </view>
        <!-- 倍速控制 -->
        <view class="control-item" @tap="togglePlaybackRate">
          <text class="control-text">{{ playbackRate }}x</text>
        </view>
        <!-- 比例控制 -->
        <view class="control-item" @tap="toggleObjectFit">
          <text class="control-text">{{ objectFit === 'contain' ? '适应' : '填充' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tempVideoUrl: {
      type: String,
      default: ''
    },
    closeImg: {
      type: String,
      default: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/39dcefb266c844e2.png'
    },
  },
  data() {
    return {
      direction: 0, // 0-竖屏，90-横屏
      playbackRate: 1.0, // 播放速度
      objectFit: 'contain', // 视频填充模式
      isFullscreen: false, // 是否全屏
      showControls: false, // 控制面板显示状态
      playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选播放速度
      videoContext: null, // 视频上下文
    }
  },
  mounted() {
    // 创建视频上下文
    this.videoContext = uni.createVideoContext('myVideo', this)
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleError(e) {
      uni.showToast({
        title: '视频播放失败',
        icon: 'none'
      })
      console.error('视频播放错误：', e)
    },
    // 切换控制面板显示状态
    toggleControls() {
      this.showControls = !this.showControls
    },
    // 切换横竖屏
    toggleDirection() {
      this.direction = this.direction === 0 ? 90 : 0
      this.showControls = false
      this.resetVideoSize()
    },
    // 切换播放速度
    togglePlaybackRate() {
      const currentIndex = this.playbackRates.indexOf(this.playbackRate)
      const nextIndex = (currentIndex + 1) % this.playbackRates.length
      this.playbackRate = this.playbackRates[nextIndex]
      this.showControls = false
    },
    // 切换填充模式
    toggleObjectFit() {
      this.objectFit = this.objectFit === 'contain' ? 'fill' : 'contain'
      this.showControls = false
    },
    // 重置视频尺寸
    resetVideoSize() {
      // 使用nextTick确保DOM更新后再重置尺寸
      this.$nextTick(() => {
        if (this.videoContext) {
          this.videoContext.exitFullScreen()
          // 重新创建上下文以刷新视频状态
          setTimeout(() => {
            this.videoContext = uni.createVideoContext('myVideo', this)
          }, 100)
        }
      })
    },
    // 监听全屏变化
    handleFullscreenChange(e) {
      this.isFullscreen = e.detail.fullScreen
      if (this.isFullscreen) {
        this.showControls = false
        this.direction = 90
      } else {
        this.direction = 0
        this.resetVideoSize()
      }
    }
  }
}
</script>

<style lang="less">
.mask {
  background-color: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;

  .close-btn {
    position: absolute;
    left: 32rpx;
    top: 32rpx;
    z-index: 1000;
    padding: 20rpx;

    .close-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .block_video {
      width: 100%;
      height: 100vh;
      transition: all 0.3s ease;

      &.is-fullscreen {
        width: 100vw;
        height: 100vh;
      }

      &:not(.is-fullscreen) {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        max-height: 80vh;
      }
    }

    .controls {
      position: absolute;
      right: -200rpx;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      z-index: 1000;
      transition: right 0.3s ease;

      &.active {
        right: 32rpx;
      }

      .control-item {
        background: rgba(0, 0, 0, 0.7);
        padding: 16rpx 24rpx;
        border-radius: 8rpx;
        
        .control-text {
          color: #fff;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>